// deno-lint-ignore-file react-no-danger

import { PageProps } from "$fresh/server.ts";
import { join } from "$std/path/mod.ts";
import { existsSync } from "node:fs";

import markdownit from "npm:markdown-it";
import shiki from "npm:@shikijs/markdown-it";

import { PackageTab } from "$types/package_tabs.enum.ts";
import { ExtractFolderProps, PackageFolderBrowser } from "@components/package/files/Folder.tsx";

const markdown = markdownit();

markdown.use(await shiki({
  themes: { light: "solarized-light", dark: "material-theme-darker" },
  defaultColor: false,
}))

export default function PackagePage({ state: { _package, tab, pathname } }: PageProps<unknown, Viapak.Package.State>) {
  const readme_path = join(_package.path!, 'README.md');
  let readme_contents: string | undefined;
  if(existsSync(readme_path)) {
    readme_contents = Deno.readTextFileSync(readme_path);
  }

  return (
    <div>
      { tab === PackageTab.README &&
        <div class="prose mt-6 w-full mx-auto max-w-320 relative max-md:text-xs">
          { readme_contents !== undefined ? <>
            <div class="bg-base-300 rounded-md px-6 py-4 w-full" dangerouslySetInnerHTML={{
              __html: markdown.render(readme_contents)
            }} />
            <a href={`${_package.url}/README.md`} class="absolute top-[1.2em] right-[1.8em] text-xs tracking-wide opacity-40">README.md</a>
          </> : <>
            <h3>This package (or this version of the package) does not have a <code>README.md</code> file</h3>
          </> }
        </div>
      }
      { tab === PackageTab.BROWSE && (
        <div class="mt-12">
          <PackageFolderBrowser folder={ExtractFolderProps(pathname, _package)!} package={_package} />
        </div>
      )}
    </div>
  );
}